{% extends "base_lang.html" %}

{% block title %}Sprunki Phase 3 - Jeu de création musicale interactive{% endblock %}

{% block description %}Découvrez Sprunki Phase 3, un jeu innovant de création musicale où le rythme rencontre la créativité.{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="pt-20 pb-12 md:pt-32 md:pb-20 bg-gradient-to-r from-primary to-secondary">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Bienvenue sur Sprunki Phase 3</h1>
            <p class="text-xl text-white mb-8">Créez, mixez et découvrez la musique interactive comme jamais auparavant</p>
            <a href="#play" class="bg-white text-primary px-8 py-3 rounded-full font-semibold hover:bg-opacity-90 transition duration-300">
                Jouer maintenant
            </a>
        </div>
    </div>
</section>
<!-- Game Section -->
<section id="play" class="py-16 bg-white dark:bg-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="relative">
            <iframe src="{{ config.GAME_URL }}" 
                class="w-full rounded-lg shadow-xl" 
                style="height: 600px;"
                id="game-iframe" 
                frameborder="0" 
                allowfullscreen>
            </iframe>
            <button onclick="toggleFullscreen()" class="absolute top-4 right-4 bg-white dark:bg-gray-700 p-2 rounded-full shadow-lg hover:bg-gray-100 dark:hover:bg-gray-600">
                <i class="fas fa-expand text-indigo-600 dark:text-indigo-400"></i>
            </button>
        </div>
    </div>
</section>
<!-- Features Section -->
<section class="py-16 bg-gray-50 dark:bg-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-center mb-12">Key Features</h2>
        <div class="grid md:grid-cols-3 gap-8">
            {% for feature in features %}
            <div class="text-center p-6 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition duration-300">
                <div class="text-4xl text-primary mb-4">
                    <i class="{{ feature.icon }}"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">{{ feature.title }}</h3>
                <p class="text-gray-600 dark:text-gray-300">{{ feature.description }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{{ super() }}
{% endblock %} 